import type { QuizExplanationProps } from './props'
import { Text, View } from '@tarojs/components'
import classNames from 'classnames'

export function QuizExplanation({
  show = false,
  content,
  className,
}: QuizExplanationProps) {
  if (!show || !content) {
    return null
  }

  return (
    <View className={classNames('bg-blue-50 border border-blue-200 rounded-lg p-3', className)}>
      <View className="flex flex-row items-center space-x-2 mb-2">
        <Text className="text-xs font-medium text-blue-800">解析</Text>
      </View>
      <Text className="text-xs text-blue-700 leading-relaxed">
        {content}
      </Text>
    </View>
  )
}
